<template>
  <div>
    <div class="my-tag">
      <input
        v-if="isInputShow"
        v-Myfocus
        class="input"
        type="text"
        placeholder="输入标签"
        ref="inputRef"
        :value = value
        @blur="isInputShow = false"
        @keyup.enter="handlerEnter"
      />
      <div v-else @dblclick="showInput" class="text">{{ value }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value:String
  },
  data() {
    return {
      isInputShow: false,
    };
  },
  methods: {
    showInput() {
      this.isInputShow = true;
    },
    handlerEnter(e){
        this.$emit('input',e.target.value)
        this.$nextTick(()=>{
            this.$refs.inputRef.blur()
        })
    }
  },
};
</script>
<style lang="less" scoped>
</style>